<template>
  <div class="type">
    <div v-for="(item,index) in categorysub" :key="item.category_id"  v-on:click="selectcategory(item.category_id,item.name,index)">
    <mt-cell :title="item.name" >
      <span class="raido-active" v-if="index == checkIndex"></span>
      <span class="raido" v-if="index != checkIndex"></span>
      <img slot="icon" :src="item.image" width="24" height="24" >

    </mt-cell>
    </div>
    <!--<mt-cell title="标题文字">-->
      <!--<span class="raido"></span>-->
      <!--<img slot="icon" src="https://dummyimage.com/125x125" width="24" height="24">-->
    <!--</mt-cell>-->
    <!--<mt-cell title="标题文字">-->
      <!--<span class="raido-active"></span>-->
      <!--<img slot="icon" src="https://dummyimage.com/125x125" width="24" height="24">-->
    <!--</mt-cell>-->
    <!--<mt-cell title="标题文字">-->
      <!--<span class="raido"></span>-->
      <!--<img slot="icon" src="https://dummyimage.com/125x125" width="24" height="24">-->
    <!--</mt-cell>-->
    <!--<mt-cell title="标题文字">-->
      <!--<span class="raido"></span>-->
      <!--<img slot="icon" src="https://dummyimage.com/125x125" width="24" height="24">-->
    <!--</mt-cell>-->
    <!--<mt-cell title="标题文字">-->
      <!--<span class="raido"></span>-->
      <!--<img slot="icon" src="https://dummyimage.com/125x125" width="24" height="24">-->
    <!--</mt-cell>-->

  </div>
</template>


<script>
  import { Toast } from 'mint-ui';
  export default {
    name: 'Type',
    data () {
      return {
        checkIndex:-1,
        categorysub: []
      }
    },
    components: {

    },
    methods: {
      selectcategory:function(id,name,index){

//        console.log(index);
        sessionStorage.setItem('checkIndex',index);

        var saleData = {};
        var tempData = {};
        tempData.category_id = id;
        tempData.category_name = name;
        if(sessionStorage.getItem('saleData')){
          saleData = JSON.parse(sessionStorage.getItem('saleData'))
        }
        $.extend(saleData,tempData)

        sessionStorage.setItem('saleData',JSON.stringify(saleData));
        this.$router.push('/sale')
      }
    },
    mounted:function(){

      this.checkIndex = sessionStorage.getItem('checkIndex');

      var _this = this;
      var categorysubData = {};
      categorysubData.parent_id = 1;
      $.ajax({
        type:'post',
        data:categorysubData,
        url: RouteMap.categorysub,
        success:function(res){
          if(res.code == 200){

            _this.categorysub = res.data;

          }
          else{
            //Toast(res.msg)
          }
        }
      })




    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .raido{
    display: inline-block;
    width: .6rem;
    height: .6rem;
    background: url("../../assets/sale/radio.png") 0 0 no-repeat;
    background-size: 100% 100%;
  }
  .raido-active{
    display: inline-block;
    width: .6rem;
    height: .6rem;
    background: url("../../assets/sale/radio-active.png") 0 0 no-repeat;
    background-size: 100% 100%;
  }
  .mint-cell-wrapper{
    /*background-image:none;*/
  }

</style>
